<template>
  <el-select
    filterable
    clearable
    v-model="nowValue"
    :placeholder="placeholder"
    :remote="remote"
    :remote-method="remoteMethod"
    :allow-create="allowCreate"
    @change="change"
    :multiple="multiple"
    v-bind="$attrs"
    v-on="$listeners"
  >
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item[arrLabel]"
      :value="item[arrKey]"
      :disabled="item.disabled"
    >
    </el-option>
  </el-select>
</template>

<script>
export default {
  name: 'WSelect',
  props: {
    remote:{
      type: Boolean,
      default: false
    },
    remoteMethod:{
      type: Function,
      default:()=>{

      }
    },
    placeholder:{
      type: String,
      default: '请选择'
    },
    options: Array, // 下拉选择数据
    value: {
      type: [String, Array]
    },
    // 是否允许用户创建新条目，需配合 filterable 做筛选使用
    allowCreate: {
      type: Boolean,
      default: false
    },
    // 是否多选
    multiple: {
      type: Boolean,
      default: false
    },
    // 下拉显示的label
    arrLabel: {
      type: String,
      default: 'label'
    },
    // 下拉选择的key
    arrKey: {
      type: String,
      default: 'value'
    }
  },
  data () {
    return {
      nowValue: ''
    }
  },
  watch: {
    nowValue (newVal, oldVal) {
      // console.log(newVal, oldVal)
      if (newVal !== oldVal) {
        this.nowValue = newVal
      }
    }
  },
  mounted () {
    this.nowValue = this.value
  },
  directives:{
    'loadmore': {
      //只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置
      bind(el, binding, vNode) {
        //  selectors表示一个或多个匹配元素的 CSS 选择器
        const SELECTWRAP_DOM = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap');
        SELECTWRAP_DOM.addEventListener('scroll', function () {
          /*
          * scrollHeight 获取元素内容高度(只读)
          * scrollTop 获取或者设置元素的偏移值,常用于, 计算滚动条的位置, 当一个元素的容器没有产生垂直方向的滚动条, 那它的scrollTop的值默认为0.
          * clientHeight 读取元素的可见高度(只读)
          * 如果元素滚动到底, 下面等式返回true, 没有则返回false:
          * ele.scrollHeight - ele.scrollTop === ele.clientHeight;
          */

          // 这个 + 1 有妙用
          // 滚动区域总高度 - 滚动了多少 <= 可视区域
          // console.log(this.scrollHeight,this.scrollTop,this.clientHeight)
          const condition = this.scrollHeight - this.scrollTop <= this.clientHeight + 1
          if (condition) {
            console.log(binding)
            binding.value && binding.value(binding.arg) // binding.value() 需要绑定函数  arg 传参
          }
        });
      },
      // 被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
      inserted(el, binding, vNode) {

      },
      // 所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有
      update(el, binding, vNode) {

      },
      // 解绑时
      unbind(el, binding, vNode) {

      }
    },
  },
  methods: {
    change (val) {
      // 允许新创建(目前感觉没什么用 好像)
      if (this.allowCreate) {
        // console.log(this.allowCreate)
        let arr = this.options.filter(v => v.value === val)
        if (arr.length === 0) {
          // let arr1 = []
          // val.forEach(item => {
          //   arr1 = arr1.concat(this.options.filter(m => m.value === item))
          // })
          let item = {
            value: val,
            // label: arr1,
            label: val,
            allowCreate: true
          }
          this.options.push(item)
          this.$emit('selChange', item)
        } else {
          this.$emit('selChange', arr[0])
        }
      } else {
        /*单选*/
        if (!this.multiple) {
          console.log(true)
          this.options.forEach((item) => {
            if (item.value === val) {
              this.$emit('selChange', item)
            }
          })
        } else {
          /*多选*/
          let arr1 = []
          console.log(true)
          val.forEach(item => {
            let resArray = this.options.filter(m => m.value === item)
            console.log(resArray)
            arr1 = arr1.concat(resArray) // 拼接数组
          })
          this.$emit('selChange', { arr: arr1, key: val })
        }
      }
    },

    loadmore(){
      console.log("loadmore")
    }
  }
}
</script>
